<template>
	<div class="create-order">
		<div class="address-wrap">
			<template v-if="address">
				<div class="name" @click="goTo">
					<span>{{ address.uname }}</span>
					<span>{{ address.aphone }}</span>
				</div>
				<div class="address">{{ address.address }}</div>
			</template>
			<div class="name-not" @click="goTo" v-else>
				你还没有创建地址，点击前往创建吧
			</div>
			<van-icon class="arrow" name="arrow" />
		</div>
		<div class="good">
			<div class="good-item" v-for="(item, index) in cartList" :key="index">
				<div class="good-img"><img :src="item.ppicture" alt="" /></div>
				<div class="good-desc">
					<div class="good-title">
						<span>{{ item.pname }}</span>
						<span>x1</span>
					</div>
					<div class="good-btn">
						<div class="price">¥{{ item.pprice }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="pay-wrap">
			<div class="price">
				<span>商品金额</span>
				<span>¥{{ total }}</span>
			</div>
			<van-button @click="handleCreateOrder" class="pay-btn" color="#1baeae" type="primary" block>生成订单</van-button>
		</div>
		<van-popup closeable :close-on-click-overlay="false" v-model:show="showPay" position="bottom" :style="{ height: '30%' }" @click-close-icon="handleCloseOrder">
			<div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
				<van-button :style="{ marginBottom: '10px' }" color="#1989fa" block @click="handlePayOrder(1)">支付宝支付</van-button>
				<van-button color="#4fc08d" block @click="handlePayOrder(2)">微信支付</van-button>
			</div>
		</van-popup>
	</div>
</template>
<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
const { proxy } = getCurrentInstance();
import { AddressList } from '@s/address';
import { ShopCarIdsList, ShopCarDelete } from '@s/shopcar';
import { OrderAddIn } from '@s/orders';
import { SetSelled } from '@s/products';
const data = reactive({
	cartList: [],
	address: {},
	showPay: false,
});
AddressList({ uid: proxy.$store.state.user.userInfo.id }).then((res) => {
	data.address = res.data.data.find(value => {
		return value.isdefault==1;
	});
});
ShopCarIdsList({ ids: proxy.$store.state.shopcar.buyIds }).then((res) => {
	data.cartList = res.data;
});
const { cartList, address, showPay } = toRefs(data);
const total = computed(() => {
	let sum = 0;
	data.cartList.forEach((value) => {
		sum += value.pprice;
	});
	return sum;
});

const goTo = () => {
	proxy.$router.push('addressList');
};
const handleCreateOrder = async () => {
	if (!data.address) {
		proxy.$toast('你还没有创建地址哦~');
		return;
	}
	data.showPay = true;
};
const handlePayOrder = async () => {
	for (let index in data.cartList) {
		let params = {
			uid: proxy.$store.state.user.userInfo.id,
			pid: data.cartList[index].pid,
			aid: data.address.id,
			oispay: 1,
			oissend: 0,
		};
		let res = await OrderAddIn(params);
		if (res.code != 200) {
			return proxy.$toast.fail(`生成${item.pname}订单错误`);
		}
		await SetSelled({ id: data.cartList[index].pid});
		await ShopCarDelete({ id: data.cartList[index].id });
	}
	proxy.$toast.success(`购买成功`);
	data.showPay = false;
	proxy.$router.push('/index');
};

const handleCloseOrder = async () => {
	for (let index in data.cartList) {
		let params = {
			uid: proxy.$store.state.user.userInfo.id,
			pid: data.cartList[index].pid,
			aid: data.address.id,
			oispay: 0,
			oissend: 0,
		};
		let res = await OrderAddIn(params);
		if (res.code != 200) {
			return proxy.$toast.fail(`生成${item.pname}订单错误`);
		}
		let res2 = await ShopCarDelete({ id: data.cartList[index].id });
	}
	proxy.$router.push('/index');
};
const emit = defineEmits(['isNav', 'isBar', 'loading']);
onMounted(() => {
	// 初始化活动状态
	emit('isBar');
	emit('isNav');
	emit('loading');
});
</script>
<style lang="scss" scoped>
.create-order {
	background: #f9f9f9;
	.name-not {
		padding: 20px 6px;
		margin-top: 10px;
		font-size: 16px;
	}
	.address-wrap {
		padding: 50px 15px 15px 15px;
		margin-bottom: 20px;
		background: #fff;
		position: relative;
		font-size: 14px;
		color: #222333;
		.name,
		.address {
			margin: 10px 0;
		}
		.arrow {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 20px;
		}
		&::before {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 2px;
			background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
			background-size: 80px;
			content: '';
		}
	}
	.good {
		margin-bottom: 120px;
	}
	.good-item {
		padding: 10px;
		background: #fff;
		display: flex;
		.good-img {
			img {
				width: 100px;
				height: 100px;
			}
		}
		.good-desc {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			padding: 20px;
			.good-title {
				display: flex;
				justify-content: space-between;
			}
			.good-btn {
				display: flex;
				justify-content: space-between;
				.price {
					font-size: 16px;
					color: red;
					line-height: 28px;
				}
				.van-icon-delete {
					font-size: 20px;
					margin-top: 4px;
				}
			}
		}
	}
	.pay-wrap {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		padding: 10px 0px;
		border-top: 1px solid #e9e9e9;
		> div {
			display: flex;
			justify-content: space-between;
			padding: 0 5%;
			margin: 10px 0;
			font-size: 14px;
			span:nth-child(2) {
				color: red;
				font-size: 18px;
			}
		}
		.pay-btn {
			bottom: 7px;
			right: 0;
			left: 0;
			width: 90%;
			margin: 0 auto;
		}
	}
}
</style>
